<template>
    <img class="news-img" src="@/assets/video-bg.png" alt="" />
    <el-row>
      <el-col :span="30">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :router="true"
        >
        <el-menu-item index="/allnews">
          <el-icon><document /></el-icon>
          <span>新闻动态</span>
        </el-menu-item>
          <el-menu-item index="/allevents">
            <el-icon><document /></el-icon>
            <span>活动预告</span>
          </el-menu-item>
          <el-menu-item index="/allacademic">
            <el-icon><document /></el-icon>
            <span>学术交流</span>
          </el-menu-item>
          <el-menu-item index="/allnotication">
            <el-icon><document /></el-icon>
            <span>工作通知</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <router-view></router-view> <!-- 在这里添加 -->
    </el-row>
  </template>
  
<script setup lang="ts">

import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
  } from '@element-plus/icons-vue'
  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  </script>

<style>
.el-row {
    align-self: flex-start; /* 或者使用 "self-start" */
    margin: 0; /* 移除任何可能的自动margin */
    margin-left: 350px; /* 或者你想要的任何值 */
}
</style>